<template>
  <div class="echars-bar">
    <div ref="echarts-bar" class="two-bar-line" :style="{ height: height }" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
export default {
  name: 'EchartsOneBarLine',
  props: {
    listData: {
      type: Array,
      default() {
        return []
      }
    },
    listHeader: {
      type: Array,
      default() {
        return []
      }
    },
    height: {
      type: String,
      default() {
        return '240px'
      }
    }
  },
  data() {
    return {
      wrap: null,
      echarts: null,
      // 柱子类型及数据
      xDataArr: ['甲级', '乙级', '丙级']
    }
  },
  computed: {
    ...mapState('app', { opened: state => state.sidebar.opened })
  },
  watch: {
    opened(val) {
      const myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    }
  },
  mounted() {
    const options = {
      tooltip: {
        // 提示框
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        top: 10,
        icon: 'circle',
        data: ['项目总数', '合同总金额'],
        textStyle: {
          color: '#6AA4F5'
        }
      },
      grid: {
        bottom: 25
      },
      xAxis: {
        type: 'category',
        data: this.xDataArr,
        axisLabel: {
          color: '#fff',
          fontSize: 12
          // interval: 0
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#12fffe',
            width: 1,
            type: 'solid'
          }
        }
      },
      yAxis: [
        {
          name: '(个)',
          type: 'value',
          nameTextStyle: {
            color: '#fff'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#eee',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: ['#12fffe'],
              type: 'dotted'
            }
          }
        },
        {
          name: '(万元)',
          type: 'value',
          nameTextStyle: {
            color: '#fff'
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#eee',
            fontSize: 12
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }

        }
      ],
      series: [
        {
          name: '项目总数',
          data: this.projectTotal,
          type: 'bar',
          barWidth: '6px',
          itemStyle: {
            color: '#00ffe6',
            barBorderRadius: [180]
          },
          yAxisIndex: 0
        },
        {
          name: '合同总金额',
          data: this.contract,
          type: 'line',
          symbolSize: 6,
          symbol: 'circle',
          itemStyle: {
            color: 'rgb(255,237,8)', // 折线点的颜色
            lineStyle: {
              color: 'rgb(255,237,8)' // 折线的颜色
            }
          },
          yAxisIndex: 1
        }
      ]
    }
    this.echarts = echarts.init(this.$refs[`echarts-bar`])
    this.echarts.setOption(options)
    // 绑定监听事件
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() { // 清理工作 避免内存泄漏
    // 销毁监听事件
    window.removeEventListener('resize', this.resizeHandler)
    // 销毁 Echarts 实例
    this.echarts.dispose()
  },
  methods: {
    resizeHandler() {
      this.echarts.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
  .echars-bar{
    .two-bar-line{
      height:260px;
    }
  }
</style>
